{% extends 'base.html' %}
{% block content %}

    <div class="container-fluid" id="left-col">
        <div class="row">
            <div class="col-xs-6">
                <h1>Fast As You Can</h1>
                <div class="byline">An individualized 18-week marathon training program.</div>
                <div class="row" id="about">
                    <section class="about">
                        <div class="col-xs-9">
                            <p class="description">
                                Fast As You Can generates an 18-week marathon training program for runners looking for more structure or to complete their first marathon. You choose the weekly mileage and we do all the planning. Just enter a recent race performance of any distance and FAYC will generate a program with explicit paces and approximate distance for all your runs. No need to understand murky runner jargon, or wade through pace tables anymore, just get your shoes and head outside. 
                            </p>
                        </div>
                    </section>
                </div>
            </div> 
            <div class="col-xs-6" id="right-col">
                <form action="/calculate-VDOT" method="POST" id="form">
                    <div class="form-group">
                        Tell us about you so we can make a plan!
                        <br>
                        Enter an recent race <br>
                        <input id="rdist" class="form-control" type="number" name="distance" min="0">
                        <br>
                    </div>
                    <div id="units" class="form-group"> 
                        <input type="radio" name="units" value="miles"> miles
                        <input type="radio" name="units" value="kilometers"> kilometers
                        <input type="radio" name="units" value="meters"> meters
                        <br>
                    </div>
                    <div id="finish-time" class="form-group">
                        The finishing time from your race: <br>
                        <input type="number" name="hours" id="hr" size="3" min="0" max="59" value="00" lable="hour"> :
                        <input type="number" name="minutes" id="mm" size="3" min="0" max="59" value="00" label="minutes"> :
                        <input type="number" name="seconds" id="ss" size="3" min="0" max="59" value="00" lable="seconds"> 
                        <br> 
                    </div>     

                    <div class="form-group">
                        Max Weekly Mileage: <br>
                        <input id="mileage" class="form-control" type="number" name="mileage" placeholder"miles" size="3" default="0" min="0">
                        <br> 
                    </div>
                    <div class="form-group">
                        E-mail: <br>
                        <input id="email" type="email" name="email">
                        <br><br>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div>    
    </div>


{% endblock %}